<template>
  <div class="container_img">
    <div class="btn_img" @click="openDialog()">
      <img :src="value || defaultImage" alt />
    </div>

    <el-dialog title="添加素材" :visible.sync="dialogFormVisible" width="700px" center>
          <!--上传图片部分-->
          <el-upload
            style="text-align:center"
            class="avatar-uploader"
            action=""
            name="image"
            :show-file-list="false"
            :on-success="handleSuccess"
          >
            <!--预览图片的地址设置-->
            <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmImg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      dialogFormVisible: false,
      // 上传图片的地址
      uploadImageUrl: null
    }
  },
  methods: {
    openDialog() {
      this.dialogFormVisible = true
    },
      confirmImg () {
      let url = null
      if (this.activeName === 'image') {
        if (!this.selectImageUrl) {
          return this.$message.info('请选择张图片')
        } else {
          url = this.selectImageUrl
        }
      } else if (this.activeName === 'upload') {
        if (!this.uploadImageUrl) {
          return this.$message.info('请选择上传图片')
        } else {
          url = this.uploadImageUrl
        }
      }
      // this.confirmSrc = url
      // 把确认好的图片地址传给父组件
      this.$emit('input', url)
      this.dialogFormVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.btn_img{
  display: block;
  width: 50px;
  height: 50px;
  background: red;
  margin-bottom: 5px;
}
</style>
